<template>
  <div style="background: #e9edf6; padding: 20px; margin-top: 20px">
    <div class="pageContentBox">
      <div class="headTop"><span class="notTop">录取通知书打印</span></div>
      <hr class="right-hr" />
      <div v-html="lodopHtml"
           v-if="lodopHtml"
           class="noInstall-tip1"></div>
      <div class="content-head">
        <div>
          <span class="head-span">专业部</span>
          <a-cascader class="condition"
                      :options="faculty"
                      placeholder="请选择"
                      @change="facultyChange"
                      v-model="facultyId" />

          <span class="head-span">专业</span>
          <a-cascader class="condition"
                      :options="specialty"
                      :display-render="displayRender"
                      placeholder="请选择"
                      v-model="specialtyId" />

          <a-button :size="size"
                    class="clear-button after-button to-right"
                    @click="clear">
            <img src="@/assets/img/clean.png"
                 class="icon-delete" />
            清除
          </a-button>

          <span class="head-span">是否打印</span>
          <a-cascader class="condition"
                      :options="isPrint"
                      placeholder="请选择"
                      v-model="isPrintId" />
        </div>
      </div>

      <div class="content-head">
        <div>
          <a-input class="condition-input "
                   v-model.trim="keyword" />

          <a-cascader class="condition select"
                      :options="keys"
                      placeholder="姓名"
                      v-model="keysVal" />

          <a-button :size="size"
                    class="search-button"
                    @click="search">
            <icon-font type="iconsousuo"
                       style="color: #ffffff" />
            搜索
          </a-button>

          <a-button :size="size"
                    class="empty-button"
                    @click="empty">
            <icon-font type="iconqingkong1"
                       style="color: #ffffff" />
            清空
          </a-button>
        </div>
      </div>

      <div class="content-head">
        <div>
          <a-button :size="size"
                    class="batch-print-btn"
                    @click="showModalPrint">
            <img src="@/assets/img/print@2x.png"
                 class="icon-position" />
            批量打印
          </a-button>
          <a-modal v-model="visiblePrint"
                   title="提示"
                   @ok="handleOkPrint"
                   :width="478">
            <template slot="footer">
              <a-button key="back"
                        @click="handleOkPrint"
                        class="btn"> 确定</a-button>
              <a-button key="submit"
                        type="primary"
                        @click="closePop"
                        class="btn-cancle">取消</a-button>
            </template>
            <div class="img-bg"><img src="@/assets/img/duihao.png"
                   class="duihao-img" /></div>
            <div class="batch-print-text">确认要批量打印吗?</div>
          </a-modal>

          <a-button :size="size"
                    class="create-qrcode-btn button-after to-right"
                    @click="showModalQRCode">
            <img src="@/assets/img/QRCode.png"
                 class="icon-position qrcode-style" />
            生成二维码
          </a-button>
          <a-modal v-model="visibleQRCode"
                   title="提示"
                   @ok="handleOkQRCode"
                   :width="478">
            <template slot="footer">
              <a-button key="back"
                        @click="handleOkQRCode"
                        class="btn"> 确定</a-button>
              <a-button key="submit"
                        type="primary"
                        @click="closePop"
                        class="btn-cancle">取消</a-button>
            </template>
            <div class="qrcode-img-bg"><img src="@/assets/img/QRCode.png"
                   class="duihao-img" /></div>
            <div class="qrcode-text">确认要生成二维码吗?</div>
          </a-modal>

          <a-button :size="size"
                    class="refresh-button"
                    @click="refresh">
            <img src="@/assets/img/shuaxin.png"
                 class="icon-position" />
            刷新
          </a-button>
        </div>

      </div>

      <div>

        <a-table class="table-style"
                 :columns="columns"
                 :data-source="data"
                 :row-selection="rowSelection"
                 :defaultCurrent="6"
                 :pagination="pagination"
                 @change="tableChange">
          <span slot="operator"
                slot-scope="text, record">
            <a class="print-preview"
               style="border-bottom: 1px solid #66c3fd"
               @click="getPrintCode(record)">打印预览</a>| <a class = "text-btn-color4" style="border-bottom: 1px solid #66c3fd"
               @click="getPrintCode(record)">打印</a>|
            <a class = "text-btn-color3" style="border-bottom: 1px solid #66c3fd"
               @click="downloadQRCode(record)">下载二维码</a>
          </span>
        </a-table>
      </div>
    </div>
  </div>
</template>


<script>
import { Icon } from 'ant-design-vue'

import { axios } from '@/utils/request'

import { needCLodop, getLodop } from '@/utils/LodopFuncs'

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2390461_f6v2cx4wmzq.js',
})

const columns = [
  {
    title: '报名号',
    dataIndex: 'BMH',
    key: 'BMH',
  },
  {
    title: '姓名',
    dataIndex: 'XM',
    key: 'XM',
  },
  {
    title: '性别',
    dataIndex: 'XBM',
    key: 'XBM',
  },
  {
    title: '身份证号',
    dataIndex: 'SFZH',
    key: 'SFZH',
  },
  {
    title: '打印次数',
    dataIndex: 'enrollNum',
    key: 'enrollNum',
  },
  {
    title: '是否录取',
    dataIndex: 'isAdmit',
    key: 'isAdmit',
  },

  {
    title: '所属专业部',
    dataIndex: 'YXMC',
    key: 'YXMC',
  },
  {
    title: '所属专业',
    dataIndex: 'ZYMC',
    key: 'ZYMC',
  },
  {
    title: '学制',
    dataIndex: 'XZ',
    key: 'XZ',
  },
  {
    title: '层次',
    dataIndex: 'CCM',
    key: 'CCM',
  },

  {
    title: '操作',
    dataIndex: 'operator',
    width: '20%',
    key: 'operator',
    scopedSlots: {
      customRender: 'operator',
    },
  },
]

let data = []

export default {
  data () {
    return {
      pagination: {
        current: 0,
        pageSize: 8,
        showSizeChanger: true,
        pageSizeOptions: ['8', '10', '20', '30', '50'],
        showTotal: (total, range) => {
          return '显示' + range[0] + '到' + range[1] + '条, 共' + total + '条记录'
        },
        showQuickJumper: true,
        total: 0,
      },
      selectedRowKeys: [],
      /* 页码 */
      currentPage: 1,
      pageSize: 10,
      /* 关键词 */
      keyword: '',
      kw: '',
      /* 表格数据 */
      data,
      columns,
      /* 按钮大小 */
      size: 'small',
      /* 下拉框数据 */
      clazz: [],
      clazzId: [],
      faculty: [],
      facultyId: [],
      specialty: [],
      specialtyId: [],
      keys: [],
      keysVal: [],
      curQuarter: 0,
      curFaculty: 0,
      curSpecialty: 0,
      curClazz: 0,
      curPrint: 2,
      condit: '',
      isPrint: [],
      isPrintId: [],
      /* 按条件搜索报到的数量 */
      createCount: 0,
      /* 弹出框属性 */
      visible: false,
      loading: false,
      /* 弹窗对象 */
      entityObj: {},

      visiblePrint: false,
      visibleQRCode: false,

      //插件对象
      LODOP: {},
      //插件未装提示信息
      lodopHtml: '',
      //打印的代码
      lodopCode: '',
    }
  },
  mounted () {
    this.getStuList()
    this.getFaculty()
    this.addCondit()
  },
  computed: {
    rowSelection () {
      const selectedRowKeys = this.selectedRowKeys //常量

      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  components: {
    IconFont,
  },
  methods: {
    getPrintCode (o) {
      axios({
        url: 'enroll/admissionPrint/getPrintCode',
        method: 'post',
        params: {},
      })
        .then((res) => {
          if (res.code == 500) {
            this.$message.warning(res.message)
            return
          }

          let ptem = res.result
          //获取打印模板的代码
          let code = ptem[0].code

          let a = code.replace(/&quot;/g, '"')
          let b = a.replace('身份证号', '身份证号:' + o.SFZH)
          let c = b.replace('姓名', '姓名:' + o.XM)
          let d = c.replace('专业部', o.YXMC)
          let e = d.replace('层次', o.CCM == undefined ? '层次' : o.CCM)
          let f = e.replace('学制', '学制:' + o.XZ)
          let g = f.replace('专业', o.ZYMC)
          let h = g.replace('报名号', '报名号:' + o.BMH)

          this.lodopCode = h

          this.modelPriview()
        })
        .catch((err) => {
          this.$message.warning('获取打印代码失败/未启用模板')
        })
    },

    //打印
    // myPrint() {
    //   //检查是否安装
    //   this.CreateFullBill()
    //   console.log('打印')
    //   let LODOP = this.LODOP
    //   if (this.LODOP) {
    //     eval(this.lodopCode)
    //     LODOP.PRINT()
    //   }
    // },

    //预览
    previewModel () {

      let LODOP = this.LODOP

      eval(this.lodopCode)
      if (LODOP.CVERSION) CLODOP.On_Return = null
      LODOP.PREVIEW()
    },

    //打印预览
    modelPriview () {
      //检查是否安装
      this.CreateFullBill()

      //有安装才可以运行
      if (this.LODOP) {
        //预览模板
        this.previewModel()
      }
    },

    //判断是否安装插件
    CreateFullBill () {

      try {
        var res = getLodop()
        if (res.LODOP) {
          let LODOP = res.LODOP
          this.LODOP = LODOP
        }

        if (res.errmsg) {
          this.lodopHtml = res.errmsg
        }
        if (LODOP && LODOP.VERSION) {
          if (LODOP.CVERSION)
            this.$message.success(
              '当前有WEB打印服务C-Lodop可用!\n C-Lodop版本:' + LODOP.CVERSION + '(内含Lodop' + LODOP.VERSION + ')'
            )
          else this.$message.success('本机已成功安装了Lodop控件！\n 版本号:' + LODOP.VERSION)
        }
      } catch (err) {
        console.log(err)
      }
    },

    downloadQRCode (o) {

      axios({
        url: 'enroll/admissionPrint/downloadQRCode',
        method: 'post',
        params: {
          id: o.key,
        },
      })
        .then((res) => {
          if (res.code == 500) {
            this.$message.warning(res.message)
            return
          }

          window.location = 'https://csm-bucket.oss-cn-hangzhou.aliyuncs.com/qrcode/' + res.result
        })
        .catch((err) => {
          this.$message.warning('下载二维码失败')
        })
    },

    showModalPrint () {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要打印录取通知书的学生！')
        return
      }
      this.visiblePrint = true
    },
    //批量打印
    handleOkPrint () {

      //检查是否安装
      this.CreateFullBill()
      let LODOP = this.LODOP;

      let ids = this.selectedRowKeys

      axios({
        url: 'enroll/admissionPrint/getPrintCode',
        method: 'post',
        params: {},
      })
        .then((res) => {
          if (res.code == 500) {
            this.$message.warning(res.message)
            return
          }

          let ptem = res.result

          //获取打印模板的代码
          let code = ptem[0].code

          let printCode = '';

          for (let i = 0; i < ids.length; i++) {
            let id = ids[i]

            for (let j = 0; j < this.data.length; j++) {
              if (id == this.data[j].key) {

                let data = this.data[j]

                let a = code.replace(/&quot;/g, '"')
                let b = a.replace('身份证号', '身份证号:' + data.SFZH)
                let c = b.replace('姓名', '姓名:' + data.XM)
                let d = c.replace('专业部', data.YXMC)
                let e = d.replace('层次', data.CCM == undefined ? '层次' : data.CCM)
                let f = e.replace('学制', '学制:' + data.XZ)
                let g = f.replace('专业', data.ZYMC)
                let h = g.replace('报名号', '报名号:' + data.BMH)

                let index = h.indexOf(';');

                //console.log("index:"+index);

                let pCode = h.slice(index + 2);

                printCode += 'LODOP.NewPage();\n' + pCode;

              }
            }
          }

          var timestamp = (new Date()).getTime();
          LODOP.PRINT_INIT("录取通知书_" + timestamp);
          eval(printCode)
          LODOP.PREVIEW()

        })
        .catch((err) => {
          this.$message.warning('获取打印代码失败')
        })

      this.visiblePrint = false;
    },

    showModalQRCode () {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要生成二维码的学生！')
        return
      }
      this.visibleQRCode = true
    },
    handleOkQRCode () {
      let ids = ''

      for (let i = 0; i < this.selectedRowKeys.length; i++) {
        ids += this.selectedRowKeys[i]
        if (i != this.selectedRowKeys.length - 1) {
          ids += ','
        }
      }

      axios({
        url: 'enroll/admissionPrint/createQRCode',
        method: 'post',
        params: {
          ids: ids,
        },
      })
        .then((res) => {
          this.$message.success(res.result)
          this.refresh()
        })
        .catch((err) => {
          this.$message.warning('批量生成二维码失败')
        })

      this.visibleQRCode = false
    },
    //关闭批量打印/生成二维码弹窗
    closePop () {
      this.visibleQRCode = false;
      this.visiblePrint = false;
    },

    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    clear () {
      this.facultyId = []
      this.specialty = []
      this.specialtyId = []
      this.clazz = []
      this.clazzId = []

      this.isPrintId = []
    },
    empty () {
      this.keyword = ''
      this.keysVal = []
      this.clear()
    },
    search () {
      this.currentPage = 1
      this.curFaculty = this.facultyId.length == 0 ? 0 : this.facultyId[0]
      this.curSpecialty = this.specialtyId.length == 0 ? 0 : this.specialtyId[0]
      this.curClazz = this.clazzId.length == 0 ? 0 : this.clazzId[0]
      this.kw = this.keyword
      this.condit = this.keysVal[0] == undefined ? 'XM' : this.keysVal[0]
      this.curPrint = this.isPrintId[0] == undefined ? 2 : this.isPrintId[0]
      this.getStuList()
    },
    refresh () {
      this.selectedRowKeys = []
      this.getStuList()
    },

    tableChange (pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize

      this.currentPage = pagination.current
      this.pageSize = pagination.pageSize

      this.getStuList()
    },
    getStuList () {
      let currentPage = this.currentPage
      let pageSize = this.pageSize

      axios({
        url: 'enroll/admissionPrint/select',
        method: 'post',
        params: {
          facultyId: this.curFaculty,
          specialtyId: this.curSpecialty,
          clazzId: this.curClazz,
          keyword: this.kw,
          condit: this.condit,
          currentPage: currentPage,
          pageSize: pageSize,
          isPrint: this.curPrint,
        },
      })
        .then((res) => {
          if (res.code == 500) {
            this.$message.warning(res.message)
            return
          }

          data.splice(0, data.length)

          for (let stu of res.result.list) {
            let sex = stu.xbm == 1 ? '男' : '女'
            let isAdmit = stu.isAdmit == 1 ? '已录取' : '未录取'
            data.push({
              key: stu.id,
              BMH: stu.bmh,
              XM: stu.xm,
              XBM: sex,
              SFZH: stu.sfzh,
              enrollNum: stu.enrollNum,
              isAdmit: isAdmit,
              YXMC: stu.yxmc,
              ZYMC: stu.zymc,
              XZ: stu.xz,
              CCM: stu.ccm,
            })
          }
          this.pagination.current = currentPage
          this.pagination.total = res.result.count
        })
        .catch((err) => {
          this.$message.warning('获取学生列表失败')
        })
    },
    addCondit () {
      for (let k of [
        { value: 'XM', label: '姓名' },
        { value: 'SFZH', label: '身份证号' },
      ]) {
        this.keys.push({
          value: k.value,
          label: k.label,
        })
      }

      for (let p of [
        { value: 2, label: '全部' },
        { value: 1, label: '已打印' },
        { value: 0, label: '未打印' },
      ]) {
        this.isPrint.push({
          value: p.value,
          label: p.label,
        })
      }
    },

    getFaculty () {
      axios({
        url: 'enroll/reportMng/getFaculty',
        method: 'post',
        params: {},
      })
        .then((res) => {
          for (let faculty of res.result) {
            this.faculty.push({
              value: faculty.id,
              label: faculty.yxmc,
            })
          }
        })
        .catch((err) => {
          this.$message.warning('获取专业部失败')
        })
    },
    facultyChange (value) {
      this.specialty = []
      this.specialtyId = []

      if (value.length == 0) {
        return
      }

      axios({
        url: 'enroll/reportMng/getSpecialty',
        method: 'post',
        params: {
          facultyId: this.facultyId[0],
        },
      })
        .then((res) => {
          this.specialty.splice(0, this.specialty.length)
          for (let specialty of res.result) {
            this.specialty.push({
              value: specialty.id,
              label: specialty.zymc,
              // children: [
              //   {value: '1',
              //   label: '1',}
              // ]
            })
          }
        })
        .catch((err) => {
          this.$message.warning('获取专业失败')
        })
    },
    displayRender ({ labels }) {
      return labels[labels.length - 1]
    },
  },
}
</script>

<style>
.noInstall-tip1 {
  margin-top: -20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
}

.table-style {
  text-align: center;
}

.qrcode-style {
  width: 15px;
  height: 15px;
}

.batch-print-btn {
  width: 120px;
  height: 34px;
  border-radius: 5px;
}

.batch-print-btn,
.batch-print-btn:hover,
.batch-print-btn:active,
.batch-print-btn:focus {
  color: white;
  background: #00d09d;
}

.create-qrcode-btn {
  width: 142px;
  height: 34px;
  border-radius: 5px;
}

.to-right {
  margin-right: 20px;
}

.create-qrcode-btn,
.create-qrcode-btn:hover,
.create-qrcode-btn:active,
.create-qrcode-btn:focus {
  color: white;
  background: #0098f8;
}

.qrcode-text {
  width: 190px;
  height: 19px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #666666;
  line-height: 24px;
  margin-top: 20px;
  margin-left: 130px;
}

.batch-print-text {
  width: 190px;
  height: 19px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 700;
  color: #666666;
  line-height: 24px;
  margin-top: 20px;
  margin-left: 139px;
}
</style>